<template>
  <div>
    <div>
      <span class="el-menu__title">请假信息列表</span>
    </div>
    <el-row style="margin-top: auto">
      <el-table :data="currUserList" height="600"
                id="User"
                border stripe
                highlight-current-row
                @current-change="deleteSunday"
                style="width: 100%"
                size="mini"
                v-loading="userTableLoading">
        <el-table-column prop="id" label="编号" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="username" label="用户名" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="begTime" label="开始时间" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="endTime" label="结束时间" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="note" label="请假事由" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
      </el-table>
    </el-row>

    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="[10,20,30]"
        layout="total, sizes, prev, pager, next, jumper"
        style="padding-top: 10px;float: right;"
        :total="dataListsCount">
      </el-pagination>
    </el-row>
    <el-button type="primary" @click="deleteSun">删 除</el-button>

  </div>

</template>

<script>
    import {postRequest} from "../../utils/api";

    export default {
        name: "SundayList",
        data() {
            return {
                //  当前页数
                currentPage: 1,
                // 显示条数
                pageSize: 10,
                // 数据总条数
                dataListsCount: 0,
                // curr Data
                currUserList: [],
                // total Data
                User: [],
                userTableLoading: false,
                currentSun: {}
            }

        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val
                let array = this.currUserList
                if (array.length > 0 && array !== null && array !== undefined) {
                    this.currentPage = 1
                    this.init()
                }
            },
            handleCurrentChange(val) {
                this.currUserList = []
                this.currentPage = val
                if (this.pageSize * val > this.User) {
                    for (let i = this.pageSize * (val - 1); i < this.User; i++) {
                        this.currUserList.push(this.User[i])
                    }
                } else {
                    for (let i = this.pageSize * (val - 1); i < this.pageSize * val; i++) {
                        this.currUserList.push(this.User[i])
                    }
                }
            },
            deleteSunday(val) {
                this.currentSun = val;
            },
            deleteSun(val) {
                postRequest('/sunday/delete',
                    {
                        'id': this.currentSun.id,
                        'username': this.currentSun.username,
                    }).then(res => {
                    if (res && res.flag === '1') {
                        // 保存登录信息
                        this.$message.success(' 删除成功录入成功');
                        // replace 不可回退  铺设可以
                    }
                })
            },
            init() {
                // 初始化加载显示所有用户信息。
                postRequest('/sunday/findAll', {}).then(res => {
                    this.currentPage = 1 // 当前页码
                    this.User = [] // total Data
                    this.currUserList = [] // current Data
                    this.dataListsCount = res.retList.length
                    this.User = res.retList;
                    // 分页分割
                    if (this.dataListsCount > this.pageSize) {
                        for (let i = 0; i < this.pageSize; i++) {
                            this.currUserList.push(this.User[i])
                        }
                    } else {
                        this.currUserList = this.User
                    }
                })
            },
        }, // methonds
        mounted() {
            this.init()
        }
    }
</script>

<style scoped>

</style>
